<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/ol-debug.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <style>
        #marker {
            width: 20px;
            height: 20px;
            border: 1px solid #088;
            border-radius: 10px;
            background-color: #0FF;
            opacity: 0.5;
        }
        #vienna {
            text-decoration: none;
            color: white;
            font-size: 11pt;
            font-weight: bold;
            text-shadow: black 0.1em 0.1em 0.2em;
        }
        .popover{
            max-width:300px;
            min-width: 100px;

        }
        .popover-content {
            min-width: 700px;
            max-width: 1000px;

        }
    </style>
    <script src="lib/layer/layer.js"></script>
    <link rel="stylesheet" href="js/ol3-layerswitcher.css">
    <script src="js/ol3-layerswitcher.js"></script>


</head>
<body>
<div id="map" style="width: 100%">
    <div style="display: none;">
        <!-- Clickable label for Vienna -->
        <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
        <div id="marker" title="Marker"></div>
        <!-- Popup -->
        <div id="popup" title="基本信息"></div>
    </div>

</div>
<div id="info">&nbsp;</div>
<script>
    /*视图*/
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([508881,299705],"EPSG:3857","EPSG:3857"),
        zoom: 19
    });
    /*vectorlayer*/
    var polygonTypename="xcy:polygon";
    var polygonVectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
            //return 'http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=xcy:point&outputFormat=application/json&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
            //return 'http://localhost:8080/geoserver/xcy/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=xcy:point&maxFeatures=50&outputFormat=application%2Fjson';
            return 'http://localhost:8080/geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+polygonTypename+'&outputFormat=application%2Fjson';
        },
        strategy: ol.loadingstrategy.bbox
    });
    var polylgonVectorLayer = new ol.layer.Vector({
        title:"面",
        source: polygonVectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#dd9910',
                width: 1
            }),
            fill: new ol.style.Fill({
                color: '#dd9910'
            })
        }),
        renderMode:'image'
    });


    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.FullScreen(),
            new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                projection: 'EPSG:3857',
                className: 'custom-mouse-position',
                target: document.getElementById('mouse-position')
            }),
            new ol.control.ScaleLine({  }),
        ]),
        layers: [
            polylgonVectorLayer

        ],
        view:view,
        target: 'map'
    });


    /*overlay*/
    // Popup showing the position the user clicked
    var popup = new ol.Overlay({
        element: document.getElementById('popup'),
        autoPan:true,
        autoPanMargin:100,
        positioning:'center-right'
    });
    map.addOverlay(popup);

    /*select*/
    var selectSingleClick = new ol.interaction.Select();
    map.addInteraction(selectSingleClick);
    /*前端第一种*/
    selectSingleClick.on('select', function(e) {
        var features=e.target.getFeatures().getArray();
        var element = popup.getElement();
        if (features.length>0)
        {
            var feature=features[0];
            var type=feature.getGeometry().getType();
            var property=feature.getProperties();
            var coordinate = ol.extent.getCenter(feature.getGeometry().getExtent());
            var hdms="点名："+property["Text"];
            hdms=hdms+"<br/>";
            hdms = hdms+"图层名：:"+property["Layer"];
            hdms=hdms+"<br/>";
            hdms = hdms+"位置:"+coordinate[0]+"-"+coordinate[1];

            $(element).popover('destroy');
            popup.setPosition(coordinate);
            // the keys are quoted to prevent renaming in ADVANCED mode.
            $(element).popover({
                'placement': 'top',
                'animation': false,
                'html': true,
                'content': hdms
            });
            $(element).popover('show');
        }
        else
        {
            $(element).popover('destroy');

        }

    });


    /*前端第二种*/
/*    map.on("click", function(e) {
        var element = popup.getElement();
        $(element).popover('destroy');
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            //do something
            var type=feature.getGeometry().getType();
            var property=feature.getProperties();
            var coordinate = ol.extent.getCenter(feature.getGeometry().getExtent());
            var hdms="点名："+property["Text"];
            hdms=hdms+"<br/>";
            hdms = hdms+"图层名：:"+property["Layer"];
            hdms=hdms+"<br/>";
            hdms = hdms+"位置:"+coordinate[0]+"-"+coordinate[1];

            $(element).popover('destroy');
            popup.setPosition(coordinate);
            // the keys are quoted to prevent renaming in ADVANCED mode.
            $(element).popover({
                'placement': 'top',
                'animation': false,
                'html': true,
                'content': hdms
            });
            $(element).popover('show');
        })
    });*/

    /*gis server第一种*/
  /*  var format = 'image/png';
    var wmsLayer = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/xcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'xcy:polygon'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            },
            serverType: 'geoserver',
            crossOrigin: 'anonymous'
        })
    });

    map.on('singleclick', function(evt) {
        document.getElementById('info').innerHTML = '';
        var viewResolution = /!** @type {number} *!/ (view.getResolution());
        var url = wmsLayer.getSource().getGetFeatureInfoUrl(
            evt.coordinate, viewResolution, 'EPSG:3857',
            {'INFO_FORMAT': 'application/json'});
        var element = popup.getElement();
        $(element).popover('destroy');

        if (url) {
            $.ajax({
                type: "GET",
                url: url,
                dataType:'json',
                //data: {id:1001},//也可以是字符串链接"id=1001"，建议用对象
                success: function(data){
                    console.log("返回的数据: " + data.features[0].properties.Layer);
                    var layer=data.features[0].properties.Layer;
                    var hdms = "图层名：:"+layer;

                    $(element).popover({
                        'placement': 'top',
                        'animation': false,
                        'html': true,
                        'content': hdms
                    });
                    popup.setPosition(evt.coordinate);
                    $(element).popover('show');
                }
            });

        }
    });*/

  /*gis server第二种*/
/*    map.on('click',mapClick);
    //点击地图查询
    function mapClick(evt)
    {
        var element = popup.getElement();
        $(element).popover('destroy');

        var coor=evt.coordinate;
        coor=coor.join(',');
        //注意这里直接将点坐标提交，与图层做intersrct分析，对于面图层是没关系的。如果是查询，点或者线图形，一定要将coor先设置一个容差，经行buffer之后的图形，再去与图层叠加分析。不设置容差几乎就找不到了
        //图层的图形字段是geom，不同图层的图形字段都要自己先看下自己的，有的是the_geom，有的是shape等等，具体分析即可。
        var filter='filter=<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>the_geom</PropertyName><gml:Point><gml:coordinates>'+coor+'</gml:coordinates></gml:Point></Intersects></Filter>'

        $.ajax({
            type: "GET",
            //url: "http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&CQL_FILTER=EntityHand='7E25'",
            //属性查询
            //url: "http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&PROPERTYNAME=Layer&FEATUREID=polygon.2",
            //空间查询
            url: 'http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&'+filter ,

            dataType:'json',
            success: function(data){
                console.log("返回的数据: " + data.features[0].properties.Layer);
                 var layer=data.features[0].properties.Layer;
                 var hdms = "图层名：:"+layer;

                 $(element).popover({
                 'placement': 'top',
                 'animation': false,
                 'html': true,
                 'content': hdms
                 });
                 popup.setPosition(evt.coordinate);
                 $(element).popover('show');
            }

        });
    }*/


    map.on('click', function(evt) {
        var coor=evt.coordinate;
        alert(coor);

    });

</script>
</body>
</html>